<template>
  <div class="zong">
    <!-- 头部选择器 -->
    <div class="topselect">
      <el-select v-model="mold" class="tsel" size="mini" placeholder="按类型：">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="block">
        <el-date-picker
          size="mini"
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>
    <!-- 查询，清空按钮 -->
    <div class="middlebtn">
      <el-button type="primary" size="mini">查询</el-button>
      <el-button type="info" size="mini">清空</el-button>
    </div>
    <!-- 底部，功能按钮 -->
    <div class="btmbtn">
      <div style="flex: 9">
        <el-button type="primary" size="mini">批量审核</el-button>
      </div>
      <div class="righttext">
        <span>按时间先后排序</span>
      </div>
    </div>
    <!-- 表格显示区域 -->
    <div class="bom">
      <el-table
        border
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#e4ebed', color: '#676e70', fontWeight: 'normal', border: 'none',}"
        :cell-style="{ padding: '8px 0', color: '#000' }">
        <el-table-column type="selection" align="center" ></el-table-column>
        <el-table-column prop="id" label="ID" align="center" ></el-table-column>
        <el-table-column prop="task_type" label="金额" align="center" ></el-table-column>
        <el-table-column prop="task_level" label="类型" align="center" ></el-table-column>
        <el-table-column prop="already" label="用户" align="center" ></el-table-column>
        <el-table-column prop="cut_date" label="审核日期" align="center" ></el-table-column>
        <el-table-column prop="add_time" label="截止日期" align="center" ></el-table-column>
        <el-table-column prop="state" label="状态" align="center" >
          <template scope="scope">
                <span v-if="scope.row.state=='等待审核'" style="color:#f1ae47">{{scope.row.state}}</span> 
                <span v-if="scope.row.state=='审核通过'">{{scope.row.state}}</span> 
                <span v-if="scope.row.state=='审核失败'" style="color:red;">{{scope.row.state}}</span> 
          </template>
        </el-table-column>
        <el-table-column label="审核" align="center" width="200px">
          <template scope="scope">
            <el-button class="btn" size="mini" @click="showmessage(scope.row.state)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 查看信息弹框 -->
    <el-dialog title="任务详情" :visible.sync="dialogVisible1" width="40%" >
        <div class="taskdetail">  
            任务名称<span>爆款防晒衣防紫外线夏季轻薄款</span>
        </div>
        <div class="taskdetail">
            佣金金额<span>8.00元</span>
        </div>  
        <div class="taskdetail">
            任务人<span>13878961245</span>
        </div>
        <div class="taskdetail">
            任务截图<span></span>
        </div>
        <div class="taskdetail">
            提交时间<span>2012-05-30 12:34</span>
        </div>
        <div class="taskdetail">
            审核状态<span>等待审核</span>
        </div>
        <div class="taskdetail">
            审核<span> <el-radio v-model="radio" label="1">通过</el-radio>
                      <el-radio v-model="radio" style="margin-left:200px; margin-bottom:100px;" label="2">驳回</el-radio></span>
                      <!-- 通过按钮显示 -->
                      <div style="position:absolute;left:140px;" >
                           <label for="">播放量次</label>  <el-input v-model="input"  :disabled="this.succeed" style="width:120px;" size="mini"></el-input><br>
                            <label for="">融进金额</label> <el-input v-model="input" :disabled="this.succeed" style="width:120px;margin-top:10px;" size="mini"></el-input>
                      </div>
                      <!-- 驳回理由选择 -->
                      <el-checkbox-group v-model="checkList" style="float: right;">
                         <p><el-checkbox style="margin-top:5px;" label="播放量不够" :disabled='this.disabled'></el-checkbox></p> 
                         <p><el-checkbox style="margin-top:5px;" label="虚假图片" :disabled='this.disabled'></el-checkbox></p> 
                         <p><el-checkbox style="margin-top:7px;" label="链接错误" :disabled='this.disabled'></el-checkbox></p> 
                      </el-checkbox-group>
        </div>
        <div style="height:90px;">

        </div>
        <span slot="footer"  >
            <el-button type="primary" @click="dialogVisible1 = false">提 交</el-button>
        </span>
    </el-dialog>
    <!-- 查看信息弹框（审核通过） -->
    <el-dialog title="任务详情" :visible.sync="dialogVisible2" width="40%" >
        <div class="taskdetail">
            任务名称<span>爆款防晒衣防紫外线夏季轻薄款</span>
        </div>
        <div class="taskdetail">
            佣金金额<span>8.00元</span>
        </div>  
        <div class="taskdetail">
            任务人<span>13878961245</span>
        </div>
        <div class="taskdetail">
            任务截图<span></span>
        </div>
        <div class="taskdetail">
            提交时间<span>2012-05-30 12:34</span>
        </div>
        <div class="taskdetail">
            审核状态<span>恭喜你，审核通过</span>
        </div>
    </el-dialog>
    <!-- 查看信息弹框（审核失败） -->
    <el-dialog title="任务详情" :visible.sync="dialogVisible3" width="40%" >
        <div class="taskdetail">
            任务名称<span>爆款防晒衣防紫外线夏季轻薄款</span>
        </div>
        <div class="taskdetail">
            佣金金额<span>8.00元</span>
        </div>  
        <div class="taskdetail">
            任务人<span>13878961245</span>
        </div>
        <div class="taskdetail">
            任务截图<span></span>
        </div>
        <div class="taskdetail">
            提交时间<span>2012-05-30 12:34</span>
        </div>
        <div class="taskdetail">
            审核状态<span style="color:red">审核失败！播放量不够</span>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      input: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      checkList:[],
      disabled:true,
      succeed: false,
      radio: '1',
      // 类型
      mold: "",
      // 时间
      time: "",
      tableData: [
        {
          id: 82,
          name: "大脸猫77",
          task_type: "微信任务",
          task_level: "要求：发布抖音视频",
          already: "0/1000",
          cut_date: "2022-12-30",
          add_time: "2022-05-18",
          state: "等待审核",
        },
        {
          id: 82,
          name: "大脸猫77",
          task_type: "微信任务",
          task_level: "要求：发布抖音视频",
          already: "0/1000",
          cut_date: "2022-12-30",
          add_time: "2022-05-18",
          state: "审核通过",
        },
        {
          id: 82,
          name: "大脸猫77",
          task_type: "微信任务",
          task_level: "要求：发布抖音视频",
          already: "0/1000",
          cut_date: "2022-12-30",
          add_time: "2022-05-18",
          state: "审核失败",
        },
        {
          id: 82,
          name: "大脸猫77",
          task_type: "微信任务",
          task_level: "要求：发布抖音视频",
          already: "0/1000",
          cut_date: "2022-12-30",
          add_time: "2022-05-18",
          state: "审核通过",
        },
      ],
    };
  },
  computed: {},
  watch: {
    'radio':function(value){
      if(this.radio =='1'){
        this.disabled = true
        this.succeed = false
      }else{
        this.disabled = false
        this.succeed = true
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
      showmessage(state){
        console.log(state);
        if(state=='等待审核'){
          this.dialogVisible1 = true
        }
        if(state=='审核通过'){
          this.dialogVisible2 = true
        }
        if(state=='审核失败'){
          this.dialogVisible3 = true
        }
      }
  },
};
</script>
<style scoped >
.el-dialog__footer{
  margin-top:100px !important;
}
.taskdetail{
    font-weight: 600;
    margin-top: 20px;
}
.taskdetail span{
    font-size: 13px;
    color: gray;
    position: absolute;
    left: 120px;
}
.bom {
  margin-left: 20px;
  margin-top: 10px;
}
.el-card {
  margin-top: 30px;
  margin-left: 30px;
  width: 96%;
  height: 620px;
}
.btn {
  background-color: #adbabf;
  color: #fff;
  border-radius: 0;
}
.zong {
  width: 98%;
  background: white;
  height: 600px;
}
.topselect {
  display: flex;
}
.tsel {
  margin-left: 20px;
  margin-top: 20px;
}
.block {
  margin-left: 50px;
  margin-top: 20px;
}
.middlebtn {
  margin-left: 20px;
  margin-top: 10px;
}
.btmbtn {
  margin-left: 20px;
  margin-top: 40px;
  display: flex;
}
.righttext {
  flex: 1;
  font-size: 13px;
  color: #5e5f68;
}
</style>